<template>
  <div class="main-list-container">
    <!--  @refresh="onRefresh"> -->
    <van-pull-refresh v-model="refreshing" @refresh="onLoad">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadMoreData"
      >
        <div
          class="section"
          v-for="(objList, index) in sectionList"
          :key="index"
        >
          <formMainListItem
            v-for="(mod, index) in objList"
            :key="index"
            :mod="mod"
            class="item"
          ></formMainListItem>
          <div class="footer">
            <button
              class="btn-size left"
              @click="pushHandle(leftBtnText(index), list[index])"
              v-show="showLeftBtn(list[index])"
            >
              {{ leftBtnText(index) }}
            </button>
            <button
              class="btn-size right"
              @click="pushHandle('审核', list[index])"
              v-show="showRightBtn(list[index])"
            >
              审核
            </button>
          </div>
          <img src="@/assets/img/form/form_section_bg.png" />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import formMainListItem from "@/components/formMainListItem.vue";
import { useRouter } from "vue-router";
import api from "@/api/index";
import {
  ref,
  watchEffect,
  defineProps,
  nextTick,
  computed,
  defineExpose,
} from "vue";
import { FormTypeEnum } from "@/utils/enum";
import {
  formatOrderStatus,
  formatBackStatus,
  formatPriority,
  applyReasonFormat,
  appleFormatStatus,
  formatDelayPeriod
} from "@/utils/format";
import { parseTime } from "@/utils/utils";
import { globalEvent } from "@/main";
import { isAgent } from "@/utils/permission";
const props = defineProps({
  formType: {
    type: String,
    default: FormTypeEnum.TODO,
  },
});

const router = useRouter();
//下拉刷新
const refreshing = ref(false);
//上拉加载
const loading = ref(false);
//上拉加载结束
const finished = ref(true);
const finished1 = ref(true);
const finished2 = ref(true);
const limit = 20;
const pageNo = ref(1);
const filterM = ref({});

//存储原始返回数据
//代办工单
const workOrderList = ref([]);
//延期工单
const workOrderList1 = ref([]);
//退工工单
const workOrderList2 = ref([]);

const list = computed(() => {
  switch (props.formType) {
    case FormTypeEnum.TODO:
      return workOrderList.value;
    case FormTypeEnum.DELAY:
      return workOrderList1.value;
    case FormTypeEnum.ROLLBACK:
      return workOrderList2.value;
    default:
      return workOrderList.value;
  }
});
//存储展示数据
const sectionList = computed(() => {
  let arr = [];
  switch (props.formType) {
    case FormTypeEnum.TODO:
      {
        arr = workOrderList.value.map((element) => {
          return [
            { title: "工单编号", content: element.workOrderNumber },
            { title: "一级分类", content: element.contentCategory },
            { title: "提交日期", content: parseTime(element.submitTime,"{y}-{m}-{d}") },
            { title: "12345截止日期(15个工作日)", content: parseTime(element.processingTimeLimit,"{y}-{m}-{d}") },
            { title: "二级分类", content: element.contentParentCategory },
            { title: "转交日期", content: element.transmitTime },
            { title: "转交处理截止日期(14个工作日)", content: element.transmitEndTime },
            { title: "办结日期", content: parseTime(element.completionTime,"{y}-{m}-{d}") },
            { title: "工单状态", content: formatOrderStatus(element.status) },
            { title: "抽查情况", content: "-" },
            { title: "满意情况", content: "-" },
          ];
        });
      }
      break;
    case FormTypeEnum.DELAY:
      {
        arr = workOrderList1.value.map((element) => {
          return [
            { title: "标志位", content: formatPriority(element.priority) },
            { title: "工单编号", content: element.workOrderNumber },
            { title: "申请人", content: element.delayCreator },
            { title: "申请天数", content: formatDelayPeriod(element.delayPeriod) },
            { title: "申请状态", content: appleFormatStatus(element.status) },
            { title: "申请日期", content: parseTime(element.delayCreateTime,"{y}-{m}-{d}") },
            { title: "延期到期日", content: parseTime(element.delayTime,"{y}-{m}-{d}") },
            { title: "申请事由", content: applyReasonFormat(element.applyReason) },
          ];
        });
      }
      break;
    case FormTypeEnum.ROLLBACK:
      {
        arr = workOrderList2.value.map((element) => {
          return [
            { title: "标志位", content: formatPriority(element.priority) },
            { title: "工单编号", content: element.workOrderNumber },
            { title: "退单人员", content: element.returnPerson },
            { title: "退单时间", content: parseTime(element.returnTime,"{y}-{m}-{d}") },
            { title: "退单状态", content: formatBackStatus(element.status) },
            { title: "退单理由", content: element.returnReason },
            { title: "退单说明", content: element.returnDescription },
          ];
        });
      }
      break;
    default:
      break;
  }

  return arr;
});

const leftBtnText = (index) => {
  const model = workOrderList.value[index];
  switch (props.formType) {
    case FormTypeEnum.TODO:
      if (model.status == 1) {
        //处理状态
        return "处理"
      }

      if (model.status == 9) {
        //处理后，审核状态
        return "审核"
      }

      if (model.status == 10) {
        //审核完成，查看状态
        return "查看"
      }
      return "处理"
    default:
    return "查看"
  }
};

//显示左边按钮
const showLeftBtn = ((model) => {
  //代办工单 经办人不审核
  let options1 = props.formType == FormTypeEnum.TODO && model.status == 9 && isAgent()
  //代办工单 负责人不处理
  let options2 = props.formType == FormTypeEnum.TODO && model.status == 1 && !isAgent()
  if (options1 || options2) {
    return false
  }

  return true
})
//显示右边按钮
const showRightBtn = (model) => {
  //如果是经办人直接不显示审核
  if (isAgent()) {
    return false;
  }
  switch (props.formType) {
    case FormTypeEnum.TODO:
      return false;
    case FormTypeEnum.DELAY:
      return model.status != 12 ? true : false;
    case FormTypeEnum.ROLLBACK:
      return model.status != 14 ? true : false;
    default:
      return false;
  }
};

globalEvent.on("myGlobalEvent", (data) => {
  pageNo.value = 1;
  filterM.value = data;
  if (filterM.value.formType == props.formType) {
    loadData();
  }
  
});

watchEffect(() => {
  nextTick(() => {
    onLoad();
  });
});

const loadData = () => {
  
  filterM.value.pageNo = pageNo.value;
  filterM.value.pageSize = limit;
  //筛选的时候字段相同，赋值的是区分显示，实际createTime createTime1 createTime2 只能存在一个值
  if (filterM.value.createTime1 != undefined) {
    filterM.value.createTime = filterM.value.createTime1;
  } else if (filterM.value.createTime2 != undefined) {
    filterM.value.createTime = filterM.value.createTime2;
  }
  api.institutionMainPage(props.formType, filterM.value).then(({ data }) => {
    refreshing.value = false;
    loading.value = false;
    const total = data.total;

    switch (props.formType) {
      case FormTypeEnum.TODO:
        {
          if (total == 0) {
            //暂无数据
            finished.value = true;
            workOrderList.value = [];
          } else {
            if (pageNo.value == 1) {
              workOrderList.value = data.list;
              finished.value = workOrderList.value.length >= total;
            } else if (pageNo.value > 1) {
              workOrderList.value = workOrderList.value.concat(data.list);
              
            }
          }
        }
        break;
      case FormTypeEnum.DELAY:
        {
          if (total == 0) {
            //暂无数据
            finished1.value = true;
            workOrderList1.value = [];
          } else {
            if (pageNo.value == 1) {
              workOrderList1.value = data.list;
              finished1.value = workOrderList1.value.length >= total;
            } else if (pageNo.value > 1) {
              workOrderList1.value = workOrderList1.value.concat(data.list);
              finished1.value = workOrderList1.value.length > total;
            }
          }
        }
        break;
      case FormTypeEnum.ROLLBACK:
        {
          if (total == 0) {
            //暂无数据
            finished2.value = true;
            workOrderList2.value = [];
          } else {
            if (pageNo.value == 1) {
              workOrderList2.value = data.list;
              finished2.value = workOrderList2.value.length >= total;
            } else if (pageNo.value > 1) {
              workOrderList2.value = workOrderList2.value.concat(data.list);
              finished2.value = workOrderList2.value.length > total;
            }
          }
        }
        break;
      default:
        break;
    }
  });
};

//下拉重新加载
const onLoad = () => {
  filterM.value = {};
  pageNo.value = 1;
  loadData();
};

//加载更多
const loadMoreData = () => {
  pageNo.value++;
  loadData();
};

//跳转到详情页
const pushHandle = (title, model) => {
  let name = "";
  if (title === "处理") {
    name = "formManage";
  } else if (title == "审核") {
    name = "formCheck";
  } else {
    //查看
    name = "formDetail";
  }
  const identifer = model.id;
  //处理
  router.push({
    name: name,
    query: {
      type: props.formType,
      id: identifer,
    },
  });
};

const childMethod = () => {
  console.log("子组件方法被调用");
};

//暴露子组件的方法或者数据
defineExpose({
  childMethod,
});
</script>

<script>
export default {
  name: "formMainListView",
};
</script>

<style lang="less" scoped>
.main-list-container {
  min-height: calc(100vh - 88px);
  height: auto;
  background: #fefeff;
  .section {
    margin: 20px 28px;
    background: #fefeff;
    box-shadow: 0px 8px 48px 0px rgba(4, 10, 41, 0.06);
    border-radius: 4px;
    min-height: 240px;
    height: auto;
    position: relative;

    .item {
      height: 88px;
    }

    img {
      width: 226px;
      height: 240px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
      object-fit: contain;
    }

    .footer {
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 168px;

      .btn-size-center {
        z-index: 2;
        height: 88px;
        width: 50%;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 44px;
        border-radius: 4px;
        border: 2px solid #0378fe;
        background: white;
        color: #0378fe;
      }
      .btn-size {
        z-index: 2;
        height: 88px;
        flex: 1;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 44px;
        border-radius: 4px;
        border: 2px solid #0378fe;
        margin: 0px 28px;
      }

      .left {
        color: #0378fe;
        background: white;
      }

      .right {
        background: #0378fe;
        color: #fefeff;
      }
    }
  }
}
</style>
